<template>
  <div ref="echart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    isAxisChart: {
      type: Boolean,
      default: true
    },
    chartData: {
   
    },
  },
  computed: {
    option() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
    bol(){
      return this.$store.state.tab.isCollapse
    }
  },
  watch:{
    chartData:{
        handler:function(){
            this.initChart() 
        },
        deep:true
    },
    bol:{
      aa:()=>{
        setTimeout(() => {
          this.echart.resize()
        }, 200);
      }
    }
  },
  methods:{
    initChart(c){
        console.log(c);
        this.initChartData();
        if(this.echart){
            this.echart.setOption(this.option)
        }else{
            this.echart = echarts.init(this.$refs.echart);
            this.echart.setOption(this.option)
        }
    },
    initChartData(){
        if(this.isAxisChart){
            this.axisOption.xAxis.data = this.chartData.xData;
            this.axisOption.series = this.chartData.series;
        }else{
            this.normalOption.series = this.chartData.series; 
        }
    }
  },
  data() {
    return {
      axisOption: {
        legend: {
          // 图例文字颜色
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "20%",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category", // 类目轴
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
        ],
        series: [],
      },
      normalOption: {
        tooltip: {
          trigger: "item",
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf",
        ],
        series: [
          {
            data: [],
            type: "pie",
          },
        ],
        
      },
      echart:null
    };
  },
};
</script>
<style lang="less" scoped>
</style>